<template>
  <div class="dashboard-wrapper">
    <div class="dashhoard-top">
      <el-input placeholder="请输入内容" v-model="input" clearable class="input"></el-input>
      <el-button type="success" icon="el-icon-search" @click="clickSearch">搜索</el-button>
      <el-button type="warning" icon="el-icon-upload2" @click="clickExport(3333)">导出</el-button>
    </div>
    <!--上传-->
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      append-to-body
      width="600px"
      @close="onClose"
    >
      <el-form :model="image">
        <el-form-item label="图片链接:">
          <el-input v-model="image.link" clearable placeholder="请输入链接" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="企业:">
          <el-select v-model="image.enterpriseId" @change="getCompanys" placeholder="请选择企业">
            <el-option
              v-for="(item,index) in companys"
              :key="index"
              :label="item.enterpriseName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="image.sort" clearable placeholder="请输入位置(数字)" style="width:50%"></el-input>
        </el-form-item>
      </el-form>
      <el-upload
        ref="upload"
        list-type="picture-card"
        :action="imagesUploadApi"
        :before-upload="beforeAvatarUpload"
        :before-remove="handleBeforeRemove"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
      >
        <img v-if="dialogImageUrl" width="100%" :src="dialogImageUrl" alt />
        <el-button v-else size="small" type="success">选取图片</el-button>
        <!-- <div class="el-upload__tip">只能上传xls/xlsx图片</div> -->
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="550">
        <el-table-column align="center" label="图片" fixed>
          <template slot-scope="scope">
            <img :src="scope.row.picture" width="120" height="80" />
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseId" align="center" label="企业" width="120" />
        <el-table-column prop="link" align="center" label="链接" width="120" />
        <!-- <el-table-column prop="name" align="center" label="排序" /> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="add(scope.row)">增加</el-button> -->
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            <el-button size="mini" type="info" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change='clickCurrent'
      ></el-pagination>-->
    </div>
  </div>
</template>

<script>
import getPdf from '@/utils/htmlToPdf'
// eslint-disable-next-line
/* eslint-disable */
export default {
  data() {
    return {
      loading: false,
      dialog: false,
      search: {
        input: "",
        company: ""
      },
      companys: [],
      company: "",
      currentCompany: {},
      currentCompanys: {},
      image: {
        link: "",
        enterpriseId: "",
        sort: ""
      },
      dialogImageUrl: "",
      picture: "",
      tableData: [],
      currentData: {},
      total: 0
    };
  },
  methods: {
    clickSearch() {},
    clickExport(title) {
      getPdf(title)
    },
    clickCurrent(page) {
      console.log(page);
    }
  },
  created() {
    this.total = this.tableData.length;
    this.init();
  },
  methods: {
    init() {
      getEnterprise({}).then(res => {
        if (res.code === 40000) {
          this.companys = res.data.dataList;
          this.getBanner();
        }
      });
    },
    getBanner() {
      this.loading = true;
      getBannerList({
        enterpriseId: this.currentCompany
      }).then(res => {
        if (res.code === 40000) {
          this.tableData = res.data.dataList;
          this.loading = false;
        }
      });
    },
    getCompany(item) {
      this.currentCompany = item;
    },
    getCompanys(item) {
      this.currentCompanys = item;
    },
    getDialog() {
      this.dialog = true;
    },
    beforeAvatarUpload(file) {},
    handleRemove(file) {
      // console.log(file.name, "2222");
    },
    // 上传图片
    handleSuccess(response, file, fileList) {
      // console.log(file.name, "1111");
      this.picture = response.filename;
    },
    // 移除正在上传图片
    handleBeforeRemove(file, fileList) {
      // console.log(file.name);
      deleteUploadImage({
        imageFilename: this.picture
      }).then(res => {});
    },
    // 新增/修改图片
    doSubmit() {
      let id = null;
      let enterpriseId = "";
      if (this.currentData) {
        id = this.currentData.id;
      } else {
        id = null;
      }
      if (this.currentData) {
        enterpriseId = this.image.enterpriseId;
      } else {
        enterpriseId = this.currentCompanys;
      }
      saveBanner({
        id: id,
        picture: this.picture,
        enterpriseId: enterpriseId,
        link: this.image.link,
        sort: this.image.sort
      }).then(res => {
        if (res.code === 40000) {
          this.$message({
            center: true,
            message: res.data.msg,
            type: "success",
            duration: 1000
          });
          this.getBanner();
          this.dialog = false;
        }
      });
    },
    onClose() {
      this.dialogImageUrl = "";
      this.dialog = false;
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.$message({
        center: true,
        message: msg.message,
        type: "error",
        duration: 2500
      });
    },
    del(data) {
      deleteBanner({
        id: data.id
      }).then(res => {
        if (res.code === 40000) {
          this.$message({
            center: true,
            message: res.data.msg,
            type: "error",
            duration: 1000
          });
          this.getBanner();
        }
      });
    },
    edit(data) {
      this.currentData = data;
      getBannerInfo({
        id: data.id
      }).then(res => {
        if (res.code === 40000) {
          this.image = res.data.data;
          this.dialogImageUrl = res.data.data.picture;
        }
      });
      this.dialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-wrapper {
  margin: 20px;
}
.input {
  width: 240px;
}
.dashhoard-top {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
